<template>
  <div class="_wz_cent_main">
    <div class="_wz_changePassword">
      <div style="width: 700px;margin: auto;">
        <Form ref="password" :model="changePasswordData" label-position="right" :label-width="120" :rules="validatePassword">
          <FormItem label="旧密码">
            <i-input v-model="changePasswordData.password" type="password" placeholder="请输入旧密码" clearable />
          </FormItem>
          <FormItem label="新密码" prop="newPassword">
            <i-input v-model="changePasswordData.newPassword" type="password" placeholder="请输入新密码" clearable />
          </FormItem>
          <FormItem label="确认密码" prop="pwdCheck">
            <i-input v-model="changePasswordData.pwdCheck" type="password" placeholder="请输入确认密码" clearable />
          </FormItem>
          <FormItem>
            <span style="color: #ed4014;">密码格式：最少8位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符</span>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="changePasswordOk">确定</Button>
          </FormItem>
        </Form>
      </div>
    </div>


  </div>
</template>
<script>
  export default {
    data() {
      return {
        changePasswordData: {},//修改密码表单数据

        validatePassword: {
          newPassword: [
            {required: true, message: '请输入新密码', trigger: 'blur'},
          ],
          pwdCheck: [
            {required: true, message: '确认密码', trigger: 'blur'},
            {
              validator: (rule, value, callBack) => {
                if (this.changePasswordData.newPassword != value) {
                  callBack(new Error('新密码和确认密码应相同'));
                } else {
                  callBack()
                }
              }, trigger: 'blur'
            },
            {
              validator: (rule, value, callBack) => {
                //密码强度验证
                var reg = /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*()])[0-9a-zA-Z!@#$%^&*()]{8,18}$/;   /*定义验证表达式*/

                // sessionStorage.setItem("agentPassword", );
                if (!reg.test(value) ) {
                  callBack(new Error('密码格式：最少8位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符'));
                } else {
                  callBack()
                }
              }, trigger: 'blur'
            }
          ]
        },
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态

    },
    methods: {//执行的方法
      changePasswordOk() {//修改密码提交
        let that = this;
        that.$refs["password"].validate((valid) => {
          if (valid) {

            that.$Spin.show();
            that.axios.post(that.apiUrl.systemLoginUpdatePass, that.changePasswordData).then(res => {
              that.$Spin.hide();
              if (!!res) {
                that.changePasswordData = {};

                //密码强度验证
                that.$Message.success({
                  content: "修改成功",
                  onClose: function () {

                    let agentPassword = sessionStorage.getItem("agentPassword");
                    if(!!agentPassword){
                      sessionStorage.removeItem("agentPassword");

                      sessionStorage.setItem("menuData", JSON.stringify({menus: [],id: 999}));//跳转首页
                      that.$router.push({
                        path: '/dept'//that.public.getHomePage() //
                      })
                    }
                  }
                });

              }
            }).catch(err => {
              console.log('失败', err);
            })
          } else {
            that.$Message.error('请正确填写表单');
          }
        })
      },
    },
    watch: {//监听

    },
    props: {//接收来自父组件的数据

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">
  ._wz_changePassword {
    padding: 30px 0 0 0;
    width: 100%;
    height: 100%;
    background: #fff;
  }
</style>
